<template>
    <div class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in banner" :key="index">
                    <a :href="item.link?item.link:'javascript:;'">
                        <img :src="item.url" alt="" />
                    </a>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
    name:'commonBanner',
    props:{
        banner:{
            type:Array,
            default:[]
        }
    },
    data(){
        return{
           wid:'' ,
           ismobile:false
        }
    },
    mounted(){
        this.$nextTick(()=>{
            var swiper1 = new Swiper ('.banner .swiper-container', {
                loop: true,
                speed:3000,
                autoplay:true,
                observer:true,
                observeParents:true,
                observeSlideChildren:true,
                // 如果需要分页器
                pagination: { 
                    el: ".swiper-pagination", 
                    dynamicBullets: true,
                    clickable: true, 
                },
                // 如果需要前进后退按钮
                navigation: { 
                    nextEl: ".swiper-button-next", 
                    prevEl:".swiper-button-prev", 
                },
            })
        })
        this.wid = document.body.clientWidth
        if(this.wid<900){
            this.ismobile = true
        }else{
            this.ismobile = false
        }
        
        
    },
    watch:{
        wid:{
            handler(newval,oldval){
                console.log(newval)
                if(newval<900){
                    this.ismobile = true
                }else{
                    this.ismobile = false
                }
                console.log('ismobile',this.ismobile)
            },
            deep:true,
            immediate:true
        }
    }
}
</script>
<style lang="scss" scoped>
    @import  '@/assets/css/common.scss';
    .swiper-button-next,.swiper-button-prev{
        width: 62px!important;
        height: 62px!important;
        border-radius: 10px;
        line-height: 62px;
        text-align: center;
        color: #fff;
        
        background: rgba(0,0,0,.6);
        &::after{
            font-size: 18px!important;
            font-weight: bold;
        }
    }
    @media screen and (max-width: 900px) {
        .swiper-button-next,.swiper-button-prev{
        width: .42rem!important;
        height: .42rem!important;
        border-radius: .1rem;
        line-height: .42rem;
        text-align: center;
        color: #fff;
        
        background: rgba(0,0,0,.6);
        &::after{
            font-size: .18rem!important;
            font-weight: bold;
        }
    }
    }
</style>